<template>
  <!-- TODO:暂时存在问题，不可用 -->
  <!-- 封装 el-button -->
  <el-button
    v-bind="$attrs"
    :type="type"
    :size="size"
    :round="round"
    :color="color"
    @click="handleClick"
  >
    <slot></slot>
  </el-button>
</template>

<script setup lang="ts">
import { ElButton } from "element-plus";
import type { PropType } from "vue";

type ButtonType =
  | "primary"
  | "success"
  | "warning"
  | "danger"
  | "info"
  | "text";
type ButtonSize = "large" | "default" | "small";

// 直接解构defineProps
// const {
//   type = "primary",
//   size = "default",
//   round = true,
// } =
defineProps({
  type: {
    type: String as PropType<ButtonType>,
    default: "primary",
  },
  size: {
    type: String as PropType<ButtonSize>,
    default: "default",
  },
  round: {
    type: Boolean,
    default: true,
  },
  color: {
    type: String,
    default: "",
  },
});

const emit = defineEmits(["click"]);

const handleClick = (evt: MouseEvent) => {
  emit("click", evt);
};
</script>
